<template>
  <div class="chart-content-wrapper">
    <top-filter :title="everyMedicalTypeFilter.title">
      <single-list-filter-without-cb :filter="filter" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelect">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :defaultText="'统筹区'" :filter="filter" :type="'planArea'"
                                     @confirmSingleSelect="confirmSingleSelect">
      </single-list-filter-without-cb>
      <group-list-filter :defaultText="'医院等级'" :filter="filter" :type="'hospital'"
                         @confirmDoubleSelect="confirmDoubleSelect">
      </group-list-filter>
      <double-check-filter :defaultText="'典型单'" :filter="filter" :type="'singleEntityType'"
                           @confirmSingleSelect="confirmSingleSelect">
      </double-check-filter>
    </top-filter>
    <div id="tenDiseaseCostChartsId" class="chart-type1" style="height:68%"></div>
    <summarize></summarize>
  </div>
</template>

<script>
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import GroupListFilter from '../filter/group-list-filter.vue'
  import DoubleCheckFilter from '../filter/double-check-filter.vue'
  import Summarize from '../summarize/summarize.vue'
  import TopFilter from '../filter/top-filter1.vue'
  import {straightSideOption} from '../../common/mixin'
  export default {
    props: ['isChange'],
    watch: {
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    components: {
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
      GroupListFilter,
      DoubleCheckFilter
    },
    data () {
      return {
        filter: require('../../cnst/allInputs.json').data,
        everyMedicalTypeFilter: {
          title: '10种典型单病种例均费用'
        }
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('tenDiseaseCostChartsId'), null, {renderer: 'canvas'})
        // 绘制图表

        this.myChart.setOption(straightSideOption);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import "../../../assets/css/last-charts.css";
</style>
